<template>
  <div>
    <!-- 编辑弹窗 -->
    <cvue-dialog
      :dialogVisible="dialogVisible"
      :title="title"
      :dialogLoading="dialogLoading"
      dialogWidth="500px"
      @handleOpen="getDetail"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
      @handleClose="handleClose">
      <div class="dialog-body" slot="dialogBody">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="角色名" prop="name">
                <el-input v-model.trim="ruleForm.name" :disabled="disabled"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="编码" prop="code">
                <el-input v-model.trim="ruleForm.code" :disabled="disabled"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="机构ID" prop="orgId">
                <el-input v-model.trim="ruleForm.orgId" :disabled="disabled"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="24" v-if="tenantId === this.superTenantId">
              <el-form-item label="选择租户" prop="tenantId">
                <el-select v-model="ruleForm.tenantId" placeholder="请选择租户" style="width:100%" clearable :disabled="$parent.actionType == 'edit'">
                  <el-option
                    v-for="item in tenantArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="角色类型" prop="type">
                <el-radio-group v-model="ruleForm.type">
                  <el-radio :label="0">预置角色</el-radio>
                  <el-radio :label="1">机构角色</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import cvueDialog from '@/components/cvue-dialog'
import { validPhone, validIp, validIdCN, validIdData } from '@/util/validator.js'
export default {
  name: 'roleEdit',
  components: {
    cvueDialog
  },
  data () {
    return {
      ruleForm: {
        name: '',
        code: '',
        type: 1,
        orgId: '',
        tenantId: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
          { validator: validIdCN, trigger: 'blur' }
        ],
        orgId: [
          { validator: validIdData, trigger: 'blur' }
        ],
        tenantId: [
          { required: true, message: '请选择租户', trigger: 'blur' }
        ]
      },
      disabled: false,
      dialogLoading: false,
      status: 1,
      roles: [],
      tenantArr: []
    }
  },
  mounted () {
    this.getEditDetail()
    if (this.tenantId === this.superTenantId) {
      this.getTenantArr()
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title () {
      var title = ''
      if (this.$parent.actionType == 'add') {
        title = '新增'
      } else {
        title = '编辑'
      }
      return title
    },
    ...mapGetters(['token', 'tenantId'])
  },
  methods: {
    // 触发事件
    handleClose () {
      this.$emit('handleClose')
    },
    closeDialog () {
      this.$emit('closeDialog')
    },
    confirmDialog () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var params
          if (this.$parent.actionType == 'add') {
            params = {
              id: '',
              code: this.ruleForm.code,
              name: this.ruleForm.name
              // type: this.ruleForm.type,
              // orgId: this.ruleForm.orgId,
              // tenantId: this.tenantId === this.superTenantId ? this.ruleForm.tenantId : this.tenantId
            }
            // console.log(params)
            this.dialogLoading = true
            this.$store.dispatch('manage/RolePost', params).then(res => {
              // console.log(res)
              this.$message({
                message: res.msg,
                duration: 2000,
                type: 'success'
              })
              this.$emit('confirmDialog')
              this.dialogLoading = false
            }).catch((err) => {
              this.dialogLoading = false
              this.$message({type: 'error', message: err.msg})
            })
          } else {
            params = {
              id: this.$parent.rowData.id,
              code: this.ruleForm.code,
              name: this.ruleForm.name,
              type: this.ruleForm.type,
              orgId: this.ruleForm.orgId,
              tenantId: this.tenantId === this.superTenantId ? this.ruleForm.tenantId : this.tenantId
            }
            // console.log(params)
            this.dialogLoading = true
            this.$store.dispatch('manage/RolePut', params).then(res => {
              // console.log(res)
              this.$message({
                message: res.msg,
                duration: 2000,
                type: 'success'
              })
              this.$emit('confirmDialog')
              this.dialogLoading = false
            }).catch((err) => {
              this.dialogLoading = false
              this.$message({type: 'error', message: err.msg})
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getDetail () {
    },
    getEditDetail () {
      if (this.$parent.actionType == 'edit') {
        this.$set(this.ruleForm, 'name', this.$parent.rowData.name)
        this.$set(this.ruleForm, 'code', this.$parent.rowData.code)
        this.$set(this.ruleForm, 'orgId', this.$parent.rowData.orgId)
        if (this.tenantId === this.superTenantId) {
          this.$set(this.ruleForm, 'tenantId', this.$parent.rowData.tenantId)
        } 
        this.$set(this.ruleForm, 'type', this.$parent.rowData.type)
      }
    },
    getTenantArr () {
      var params = {
        code: '',
        name: ''
      }
      this.$store.dispatch('tenant/TenantSelect', params).then(res => {
        // console.log(res)
        this.tenantArr = res.data.filter((item, index, array) => {
          return item.deleted === 0 && item.enabled
        })
      })
    }
  }
}
</script>
<style scoped>
</style>
